<template>
  <view>
    <view class="header">
      <view class="back" @click="back()">
        <uni-icons type="left" size="20" color="#fff"></uni-icons>
      </view>
      <view class="headerTitle">
        打个卡
      </view>
      <view class="userName">
        Hi，{{userInfo.nickName}}
      </view>
      <view class="date">
        2024年8月22日 星期四
      </view>
    </view>

    <view class="clockType">
      <view class="typeTitle">
        <uni-icons type="calendar" size="15" color="#999"></uni-icons>
        <view class="title">
          打卡方式
        </view>
      </view>
      <view class="typeValue">
        <view class="value">
          视频打卡
        </view>
        <uni-icons type="right" size="15" color="#999"></uni-icons>
      </view>
    </view>

    <view class="videoBox">
      <video :src="url" autoplay :show-progress="false" @timeupdate='timeupdate'></video>
    </view>

    <view class="btn-box">
      <view class="btn" @click="ok()">
        打卡
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        taskId: 0,
        branchId: 0,
        type: 0,
        url: '',
        videoDuration: 0,
        duration: 0,
      };
    },
    onLoad(options) {
      this.taskId = options.taskId
      this.branchId = options.branchId
      this.type = options.type
      this.getVideo()
    },
    methods: {
      back() {
        if (this.videoDuration < 30) {
          uni.showModal({
            content: `您的时长未达标,确定现在退出吗`,
            confirmColor: '#b6edaa',
            success: function(res) {
              if (res.confirm) {
                uni.navigateBack()
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          })
        } else {
          uni.showModal({
            content: '您还未打卡，确定现在退出吗？',
            confirmColor: '#b6edaa',
            success: function(res) {
              if (res.confirm) {
                uni.navigateBack()
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          })
        }
      },
      async getVideo() {
        const {
          data: {
            data
          }
        } = await uni.$http.post('/users/tasks/maintask/detail', {
          studentId: this.userInfo.studentId,
          mainTaskId: this.taskId
        })
        console.log(data.mainTaskVO.videoUrl);
        // this.url = "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
        this.url = data.mainTaskVO.videoUrl
      },
      timeupdate(e) {
        this.videoDuration = e.detail.currentTime
        this.duration = e.detail.duration
        console.log(e.detail);
      },
      async ok() {
        if (this.videoDuration < this.duration / 3) return uni.$showMsg('时长未达标，打卡失败！')
        if (this.type == 1) {
          await uni.$http.post('/users/tasks/maintask/sign/video', {
            studentId: this.userInfo.studentId,
            mainTaskId: this.taskId,
            checked: true
          })
        } else if (this.type == 2) {
          await uni.$http.post('/users/tasks/branchtask/sign/video', {
            studentId: this.userInfo.studentId,
            mainTaskId: this.taskId,
            branchTaskId: this.branchId,
            checked: true
          })
        }
        const res = await uni.$http.post(
          `/users/tasks/check/status/${this.taskId}?studentId=${this.userInfo.studentId}`)
        console.log(res);
        uni.$showMsg('打卡成功！')
        setTimeout(function() {
          uni.navigateBack()
        }, 1500)
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    }
  }
</script>

<style lang="scss">
  .header {
    height: 340rpx;
    padding: 60rpx 30rpx;
    background-color: #b6edaa;
    box-sizing: border-box;
    
    .back{
      position: absolute;
      top: 65rpx;
      left: 21rpx;
    }

    .headerTitle {
      text-align: center;
      color: #fff;
    }

    .userName {
      margin-top: 50rpx;
      color: #fff;
      font-weight: 700;
    }

    .date {
      margin-top: 20rpx;
      color: #eee;
      font-size: 26rpx;
    }
  }


  .videoBox {
    width: 100%;

    video {
      width: 100%;
    }
  }

  .clockType {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -40rpx;
    padding: 0 20rpx;
    height: 100rpx;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0;

    .typeTitle {
      display: flex;
      align-items: center;

      .title {
        margin-left: 10rpx;
        font-size: 30rpx;
        color: #999;
      }
    }

    .typeValue {
      display: flex;

      .value {
        font-size: 30rpx;
        color: #999;
      }
    }
  }

  .btn-box {
    position: relative;
    top: 220rpx;
    left: 220rpx;
    width: 310rpx;
    height: 310rpx;
    border: 8rpx solid #c4eebe;
    border-radius: 50%;

    .btn {
      width: 280rpx;
      height: 280rpx;
      margin: 15rpx auto;
      border-radius: 50%;
      background-color: #b6edaa;
      text-align: center;
      line-height: 280rpx;
      font-size: 50rpx;
      color: #fff;
    }
  }
</style>